<template>
  <v-menu v-bind="$attrs" location="right">
    <template #activator="{ props }">
      <v-btn v-bind="props" class="ma-5">Normal Menu</v-btn>
    </template>
    <v-list>
      <v-menu location="right">
        <template #activator="{ props }">
          <v-list-item v-bind="props" title="Submenu" />
        </template>
        <v-list>
          <v-list-item title="Submenu item" />
          <v-list-item title="Submenu item" />
        </v-list>
      </v-menu>
    </v-list>
  </v-menu>

  <div ref="shadow" />
</template>

<script>
  import { createApp, h } from 'vue'
  import vuetify from './vuetify'
  import { VBtn, VList, VListItem, VMenu } from 'vuetify/src/components'

  export default {
    name: 'Playground',
    setup () {
      return {

      }
    },
    mounted () {
      const shadowRoot = this.$refs.shadow.attachShadow({ mode: 'open' })
      const shadowApp = document.createElement('div')
      shadowApp.id = 'shadow-app'
      shadowRoot.appendChild(shadowApp)
      document.querySelectorAll('style').forEach(styleElement => {
        shadowRoot.appendChild(styleElement.cloneNode(true))
      })

      createApp({
        render: () => h(VMenu, { location: 'right' }, {
          activator: ({ props }) => h(VBtn, { ...props, class: 'ma-5' }, 'Shadow Menu'),
          default: () => [
            h(VList, {}, () => [
              h(VMenu, { location: 'right' }, {
                activator: ({ props }) => h(VListItem, { ...props, title: 'Submenu' }),
                default: () => [
                  h(VList, {}, () => [
                    h(VListItem, { title: 'Submenu item' }),
                    h(VListItem, { title: 'Submenu item' }),
                  ]),
                ],
              }),
            ]),
          ],
        }),
      })
        .use(vuetify)
        .mount(shadowApp)
    },
  }
</script>